<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>个人信息</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<style type="text/css">
			input,button{margin-top: 40px;}
			*{font-size: 14px;}
			li{height: 60px;line-height: 60px;border-top: 1px solid #f2f2f2;}
			th,td{text-align: center;}
			tr{background: white;height: 30px;}
			#div-i-btnGroup {
				background-color: white;
				padding:5px 0;
			}
			#div-i-btnGroup select {
				margin-top:0;
				color:#059BF3;
				outline: none;
				font-size:18px;
				font-weight:bold;
				border:none;
			}
			.div-c-lotteryRecordItem {
				
			}
			.div-c-lotteryRecordItem div:first-child {
				border-top:10px solid #F1F1F1;
			}
			.div-c-lotteryRecordItem div {
				background-color:white;
			}
			.div-c-lotteryRecordItem div:first-child span:first-child {
				margin-left:5px;
			}
			.div-c-lotteryRecordItem div:first-child span:last-child {
				margin-right:5px;
			}
			.div-c-lotteryRecordItem div:first-child span:last-child {
			}
			
			.span-item-circle {
				display: inline-flex;
			    background: red;
			    margin: 3px;
			    border-radius: 50%;
			    color: white;
			    font-size: 14px;
			    width: 7vw;
			    height: 7vw;
			    justify-content:center;
			    align-items:center;
			}
			.clearfix:after {
				content:"";
				display:block;
				clear:both;
			}
			#div-i-lotteryRecordList {
			}
			#div-i-lotteryRecordList:empty:after {
				content:"目前未产生开奖记录";
				position: fixed;
				top:50%;
				left:50%;
				transform:translateX(-50%)translateY(-50%);
			}
		</style>
	</head>

	<body style="background: #F1F1F1 ;">
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center bg-primary" style="padding:0;position: fixed;margin-top: 0px;left: 0px;z-index: 100;">
			<div style="padding:12px;">
				<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer;color: white;font-size: 20px;"></a>
				<strong style="font-size: 20px;">开奖记录</strong>
			</div>		
			<div id="div-i-btnGroup">
				<%-- <select id="select-i-caizhongTypes">
					<c:forEach items="${lotters}" var="fenleiorf">
						<option id="option-i-${fenleiorf.cname }" value="${fenleiorf.cname }">${fenleiorf.name }</option>
					</c:forEach>
				</select> --%>
			</div>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4" style="padding: 0px;">
			<div style="height: 87px;"></div>
			<div style="width: 100%;" id="div-i-lotteryRecordList">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var insertNewData = function(arr) {
			var div = document.querySelector("#div-i-lotteryRecordList")
			div.innerHTML = ""
			for (var i = 0; i < arr.length; i++) {
				var item = arr[i]
				var spanArray = item.lotternumber.slice(0, item.lotternumber.length - 1)
				spanArray = spanArray.split(",")
				var spanHTML = ""
				for (var j = 0; j < spanArray.length; j++) {
					var spanItem = spanArray[j]
					var html = "<span class='span-item-circle'>" + spanItem + "</span>"
					spanHTML += html
				}
				var html = "<div class='div-c-lotteryRecordItem'>"+
				"<div class='clearfix'><span>第" + item.period + "期</span><span style='margin-left:16px;'>" + item.lottertime + "</span>"+
				"</div>"+
				"<div>"+
				spanHTML+
				"</div>"+		
			"</div>"
				div.insertAdjacentHTML("beforeend", html)
			}
		}
	
		var createAllData = function(cname) {
			var urlPath = "/caizhongjl.do"
			var newRequest = {
				url: urlPath,
				type: "post",
				data: {
					cname: "bjpk10",
				},
				success: function(data) {
					var newData = JSON.parse(data)
					insertNewData(newData.data)
				},
				error: function(status) {
					console.log("status", status)
				}
			}
			ajax(newRequest)			
		}
		
/* 		var bindSelectChange = function() {
			var select = document.querySelector("#select-i-caizhongTypes")
			select.addEventListener("change", function(event) {
				createAllData($("#select-i-caizhongTypes").val())
			})
		} */
		
		var __main = function() {
			createAllData($("#select-i-caizhongTypes").val())
			//bindSelectChange()
		}
		
		__main()
	</script>
</html>